<html lang="en" xmlns:th="http://www.thymeleaf.org">
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- vue -->
    <script th:src="@{js/vue2.6.14.js(t=${time})}"></script>
    <!-- jquery -->
    <script th:src="@{js/jquery3.7.1.js(t=${time})}"></script>
    <!-- element-ui -->
    <link rel="stylesheet" th:href="@{css/element-ui-2.15.4.css(t=${time})}" >
    <script th:src="@{js/element-ui-2.15.4.js(t=${time})}"></script>
    <script th:src="@{js/common.js(t=${time})}"></script>
    <script th:src="@{js/particles.min.js(t=${time})}"></script>
    <title>注册</title>
</head>
<body>
    <div id="app">
        <div id="login-form-view">
            <el-card>
                <div class="login-view">
                    <el-link href="/login" target="_self">返回登录</el-link>
                </div>
                <el-row :gutter="1">
                    <el-col><h1>用户注册</h1></el-col>
                </el-row>
                <el-row :gutter="20">
                    <el-col :span="4" :offset="2">
                        <span class="form-title">用户名</span>
                    </el-col>
                    <el-col :span="13">
                        <el-input placeholder="请输入用户名" v-model="form.username" clearable></el-input>
                    </el-col>
                </el-row>
                <el-row :gutter="20">
                    <el-col :span="4" :offset="2">
                        <span class="form-title">密码</span>
                    </el-col>
                    <el-col :span="13">
                        <el-input placeholder="请输入密码" v-model="form.password" clearable show-password></el-input>
                    </el-col>
                </el-row>
                <el-row :gutter="20">
                    <el-col :span="4" :offset="2">
                        <span class="form-title">姓名</span>
                    </el-col>
                    <el-col :span="13">
                        <el-input placeholder="请输入姓名" v-model="form.name" clearable></el-input>
                    </el-col>
                </el-row>
                <el-row :gutter="20">
                    <el-col :span="4" :offset="2">
                        <span class="form-title">角色</span>
                    </el-col>
                    <el-col :span="13">
                        <el-select v-model="form.roleId" placeholder="请选择角色">
                            <el-option :key="-1" label="请选择" value=""></el-option>
                            <el-option v-for="item in roleList" :key="item.id" :label="item.name" :value="item.id"></el-option>
                        </el-select>
                    </el-col>
                </el-row>
                <div class="buttons">
                    <div>
                        <el-button id="login-button" type="primary" @click="register">注册</el-button>
                    </div>
                </div>
            </el-card>
        </div>
    </div>
</body>

<script>
const vapp = new Vue({
    el: "#app",
    data: {
        form: {
            username: "",
            password: "",
            name: "",
            roleId: null,
        },
        // 角色列表
        roleList: []
    },
    created () {
        window.vue = this;
        let that = this;
        postRequest("/role/list", that.form,  function (result) {
            if (result.code != 0) {
                that.$message({
                    message: result.msg,
                    type: 'error'
                });
            } else {
                that.roleList = result.data;
            }
        });
    },
    mounted() {
        particlesJS.load('app', 'assets/particles.json', function() {
            console.log('callback - particles.js config loaded');
        });
    },
    methods: {
        register() {
            let that = this;

            postRequest("/register", that.form,  function (result) {
                if (result.code === 0) {
                    // 清空注册数据
                    that.form = {
                        username: "",
                        password: "",
                        name: "",
                        roleId: null,
                    };

                    that.$message({
                        message: "注册成功，请返回登录！",
                        type: 'success'
                    });
                } else {
                    that.$message({
                        message: result.msg,
                        type: 'error'
                    });
                }
            })
        }
    }
})
</script>

<style>
    body {
        /* 加载背景图 */
        /*background-image: url("images/login-background.png");*/
        background-image: url("images/login-background-6.jpg");
        /* 背景图垂直、水平均居中 */
        background-position: center center;
        /* 背景图不平铺 */
        background-repeat: no-repeat;
        /* 当内容高度大于图片高度时，背景图像的位置相对于viewport固定 */
        background-attachment: fixed;
        /* 让背景图基于容器大小伸缩 */
        background-size: cover;
        /* 设置背景颜色，背景图加载过程中会显示背景色 */
        background-color: #464646;
        margin:0px;
    }

    canvas {
        position: fixed;
        z-index: -1;
    }

    #app {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 90vh;
    }

    #login-form-view {
    }

    .el-card {
        width: 450px;
        padding-bottom: 50px;
        background: rgba(255,255,255, 0.8);
        /* 居中 */
        margin: 0 auto;
        margin-top: calc(10%);
    }

    .login-view {
        display: flex;
    }

    .login-view a {
        margin-left: auto;
    }

    .el-card h1 {
        /* element-ui颜色*/
        color: #409eff;
        text-align: center;
    }

    .el-row {
        margin: 20px 0px;
    }

    .form-title {
        line-height: 40px;
    }

    .buttons {
        display: flex;
    }
    .buttons div {
        margin: 0 auto;
    }
    #login-button {
        width: 200px;
    }

</style>
</html>